<template>
  <t-calendar :head="renderHead" :cell="renderCell"> </t-calendar>
</template>

<script lang="jsx">
import dayjs from 'dayjs';

export default {
  methods: {
    renderHead(h, params) {
      let title = params.filterDate.getFullYear();
      if (params.mode === 'month') {
        title += `-${params.filterDate.getMonth() + 1}`;
      }
      title += ' 工作安排';
      return <div>{title}</div>;
    },
    renderCell(h, params) {
      const dataList = [
        {
          value: 'error',
          label: '错误事件',
        },
        {
          value: 'warning',
          label: '警告事件',
        },
        {
          value: 'success',
          label: '正常事件',
        },
      ];
      return (
        <div class="calendar-slot-props-api-demo">
          {(params.mode === 'month'
            ? dayjs(params.formattedDate).date() === 15
            : dayjs(params.formattedDate).month() === 7) && (
            <span>
              <div class="calendar-slot-props-api-demo-slot-wrapper">
                {dataList.map((item) => (
                  <div class="item">
                    <span class={item.value}></span>
                    {item.label}
                  </div>
                ))}
              </div>
              <div class="shadow" />
            </span>
          )}
          <div class="number">
            {params.mode === 'year' ? dayjs(params.formattedDate).month() : dayjs(params.formattedDate).date()}
          </div>
        </div>
      );
    },
  },
};
</script>
<style lang="less">
.calendar-slot-props-api-demo {
  width: 100%;
  height: 100%;
  position: relative;

  .shadow {
    position: absolute;
    width: 100%;
    height: 12px;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  }
  .number {
    font-weight: bold;
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 14px;
  }
  .item {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--td-text-color-secondary);
    span {
      display: block;
      left: 1px;
      width: 5px;
      height: 5px;
      border-radius: 10px;
      margin-right: 4px;
    }
  }
  .error {
    background: var(--td-error-color);
  }
  .warning {
    background: var(--td-warning-color);
  }
  .success {
    background: var(--td-success-color);
  }
}
.calendar-slot-props-api-demo-slot-wrapper {
  position: absolute;
  bottom: 2px;
  left: 5px;
}
</style>
